<template>
    <view class="content">
        <view class="align-stretch" style="margin-bottom: 20rpx">
            <up-image 
                :src="community.user_info.avatar" 
                width="64rpx" 
                height="64rpx" 
                shape="circle"
                @click="handleNavigateTo('/pagesA/userDetails/index')"
            ></up-image>
            <view class="ml16">
                <view class="font24 weight mb8">{{ community.user_info.nick_name }}</view>
                <view class="font22 grey">{{ useFormatPast(community.create_time) }}</view>
            </view>
        </view>
        <view class="font28 mb16">{{ community.content }}</view>
        <view class="align-center mb16" style="gap: 15rpx;">
            <view class="box" @click="handleNavigateTo('/pagesA/topicDetails/index')">
                <i class="iconfont icon-huati"></i>
                <text class="grey ml8 font26">{{ community.topic_info.topic }}</text>
            </view>
            <view class="box">
                <i class="iconfont icon-xiaoquweizhi"></i>
                <text class="grey ml8 font26">{{ community.community_info.community_name }}</text>
            </view>
        </view>
        <view class="flex-wrap" style="gap: 15rpx; margin-bottom: 26rpx;" v-show="community.img_urls.length">
            <up-image src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" width="226rpx" height="226rpx" radius="12rpx"></up-image>
            <up-image src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" width="226rpx" height="226rpx" radius="12rpx"></up-image>
            <up-image src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" width="226rpx" height="226rpx" radius="12rpx"></up-image>
            <up-image src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" width="226rpx" height="226rpx" radius="12rpx"></up-image>
            <up-image src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" width="226rpx" height="226rpx" radius="12rpx"></up-image>
            <up-image src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b" width="226rpx" height="226rpx" radius="12rpx"></up-image>
        </view>
        <view class="justify-around mb16 dark-gray">
            <view class="align-center" @click="makePhoneCall">
                <i class="iconfont icon-lianxifangshi"></i>
                <text class="ml8 font24">联系电话</text>
            </view>
            <view class="align-center">
                <i class="iconfont icon-dianzan"></i>
                <text class="ml8 font24">{{ community.like_count }}</text>
            </view>
            <view class="align-center">
                <i class="iconfont icon-fenxiang"></i>
                <text class="ml8 font24">{{ community.share_count }}</text>
            </view>
            <view class="align-center">
                <i class="iconfont icon-pinglun"></i>
                <text class="ml8 font24">{{ community.comment_count }}</text>
            </view>
        </view>
        <view class="card p16 font22">
            <view v-for="item in community.comments" :key="item.id">
                <text class="name">{{ item.user_info.nick_name }}</text>
                <text class="dark-gray">：{{ item.content }}</text>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { handleNavigateTo } from '@/plugins/uniApp';
import { useFormatPast } from '@/hooks/useFormatPast'
import type { communityItemTypes } from '@/types/dynamic';

defineProps<{
    community: communityItemTypes
}>();

const makePhoneCall = () => {
    uni.makePhoneCall({ phoneNumber: '15575426387' })
}
</script>

<style lang="scss" scoped>
.content {
    padding: 20rpx 0;
    border-bottom: 1rpx solid #F5F5F5;
}
.box {
    display: flex;
    align-items: center;
    padding: 7rpx 16rpx;
    background: #F6F6F6;
    border-radius: 25rpx;
}

.card {
    background: #F8F8FA;
    border-radius: 12rpx;
    line-height: 38rpx;

    .name {
        color: #966BFF;
    }
}
</style>